<template>
  <div class="city-card card h-100 shadow-sm">
    <div class="position-relative">
      <img :src="city.image" class="card-img-top" :alt="city.name">
      <div class="card-overlay">
        <button class="btn btn-light btn-sm" @click="toggleFavorite">
          <i class="fas" :class="isFavorited ? 'fa-heart text-danger' : 'fa-heart'"></i>
        </button>
      </div>
      <div class="position-absolute top-0 end-0 m-2">
        <span class="badge bg-success">
          <i class="fas fa-star me-1"></i>{{ city.rating }}
        </span>
      </div>
    </div>
    
    <div class="card-body">
      <h5 class="card-title">{{ city.name }}, {{ city.country }}</h5>
      <p class="card-text text-muted small">{{ city.description }}</p>
      
      <div class="mb-3">
        <span v-for="tag in city.tags" :key="tag" class="badge bg-light text-dark me-1 mb-1">
          {{ tag }}
        </span>
      </div>
      
      <div class="d-flex justify-content-between align-items-center">
        <router-link :to="`/city/${city.id}`" class="btn btn-primary btn-sm">
          探索城市
        </router-link>
        <small class="text-muted">
          <i class="fas fa-user-friends me-1"></i>热门
        </small>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CityCard',
  props: {
    city: {
      type: Object,
      required: true
    }
  },
  computed: {
    isFavorited() {
      return this.$store.getters['user/isCityFavorited'](this.city.id)
    }
  },
  methods: {
    toggleFavorite() {
      if (this.isFavorited) {
        this.$store.dispatch('user/removeFavorite', this.city.id)
      } else {
        this.$store.dispatch('user/addFavorite', this.city)
      }
    }
  }
}
</script>

<style scoped>
.city-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

.city-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.15) !important;
}

.card-overlay {
  position: absolute;
  top: 10px;
  left: 10px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.city-card:hover .card-overlay {
  opacity: 1;
}

.city-card img {
  height: 200px;
  object-fit: cover;
}
</style>